<template>
  <el-dialog
    title="订单缴费"
    :visible.sync="visible"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-descriptions :column="2">
      <el-descriptions-item label="订单编号">{{info.orderNo}}</el-descriptions-item>
      <el-descriptions-item label="开单申请人">{{info.sponsor}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1">
      <el-descriptions-item label="消费人资料">{{ info.username }} ({{ info.userphone }})</el-descriptions-item>
      <el-descriptions-item label="订单金额">￥{{ info.costOriginal }}</el-descriptions-item>
      <el-descriptions-item label="折扣金额">￥{{info.costOriginal === info.cost || numSub(info.costOriginal, info.cost) < 0 ? 0 : numSub(info.costOriginal, info.cost)}}</el-descriptions-item>
      <el-descriptions-item label="应付金额">￥{{ info.cost }}</el-descriptions-item>
    </el-descriptions>



    <div>
      <div
        v-for="(item, index) in form"
        :key="item.value"
        class="disFlxAC mb-10"
      >
        <span class="shrink0 pr-5">收款方式:</span>
        <el-select
          v-model="item.value"
          placeholder=""
          size="mini"
          style="width: 100px"
        >
          <el-option
            v-for="dict in dict.type.sys_pay_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            :disabled="soleFiltration(dict.value)"
          >
          </el-option>
        </el-select>
        <span class="shrink0 pl-15 pr-5">金额:</span>
        <el-input-number
          v-model="item.money"
          controls-position="right"
          :min="0"
          :max="info.cost"
          :precision="2"
          size="mini"
          style="width: 115px"
        ></el-input-number>
        <template v-if="info.cost">
          <el-tooltip
            v-if="form.length !== dict.type.sys_pay_type.length && index === 0"
            content="添加多种支付方式"
            effect="light"
          >
            <i
              class="iconfont el-icon-circle-plus-outline fz-28 colorZS ml-10 cup"
              @click="addPayment"
            />
          </el-tooltip>
          <i
            v-else
            class="iconfont el-icon-remove-outline fz-28 colorRED ml-10 cup"
            @click="removePayment(index)"
          />
        </template>
      </div>
      <div v-if="moneyErr" class="fz-12 mb-10 color9">
        当前设置收款金额为
        <span class="colorRED">￥{{ moneyTotal }}</span>
        不等于应付金额
        <span class="colorRED">￥{{ info.cost }}</span>
        ,将无法确认收款
      </div>
    </div>

    <div slot="footer" class="tc">
      <el-button :disabled="moneyErr" @click="visible = false"
        >暂不收款</el-button
      >
      <el-button type="primary" :disabled="moneyErr" @click="confirmPay"
        >确认收款</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { differenceBy, cloneDeep } from "lodash";
import { numSub } from "@/utils/big/calculate.js";
import { setOrderPay } from "@/api/order/order";
import { checkOrderSettle } from "@/api/service";

export default {
  dicts: ["sys_pay_type", "service_items"],
  computed: {
    moneyErr() {
      let moneyTotal = 0;
      this.form.forEach((v) => {
        moneyTotal += v.money;
      });
      this.moneyTotal = moneyTotal;
      return moneyTotal !== this.info.cost;
    },
  },
  data() {
    return {
      visible: false,
      info: {}, // 订单详情
      moneyTotal: 0,
      form: [],
    };
  },
  methods: {
    numSub,
    show(info) {
      const that = this;
      that.visible = true;

      that.info = info;

      if (that.dict.type.sys_pay_type && that.dict.type.sys_pay_type.length) {
        that.form = [
          {
            value: that.dict.type.sys_pay_type[0].value + "",
            money: that.info.cost,
          },
        ];
      }
    },
    addPayment() {
      if (this.form.length < this.dict.type.sys_pay_type.length) {
        const newList = differenceBy(
          this.dict.type.sys_pay_type,
          this.form,
          "value"
        );
        this.form.push({
          value: newList[0].value,
          money: 0,
        });
      }
    },
    removePayment(index) {
      this.form.splice(index, 1);
    },
    // 判断可切换的支付类型
    soleFiltration(value) {
      const newList = differenceBy(
        this.dict.type.sys_pay_type,
        this.form,
        "value"
      );
      const values = newList.map((v) => v.value);
      return !values.includes(value);
    },

    // 确认收款
    confirmPay() {
      const that = this;
      let params = {
        orderNo: that.info.orderNo,
        payWaySet: "",
      };
      that.form.forEach((item) => {
        const payModeDict = that.dict.type.sys_pay_type.find(
          (v) => v.value === item.value
        );
        params.payWaySet += `${payModeDict.label}${item.money},`;
      });
      params.payWaySet = params.payWaySet.substring(
        0,
        params.payWaySet.length - 1
      );
      setOrderPay(params).then(() => {
        that.$emit("refresh");
        that.$message.success("确认收款成功");
        that.visible = false;
      });
    },
    // 收款并核销 - 调用核销接口, 新增 payWay 和 payWaySet字段
    // paySettle() {
    //   const that = this;

    //   let payWaySet = "";
    //   that.form.forEach((item) => {
    //     const payModeDict = that.dict.type.sys_pay_type.find(
    //       (v) => v.value === item.value
    //     );
    //     payWaySet += `${payModeDict.label}${item.money},`;
    //   });

    //   let params = {
    //     payWay: 2, // 支付方式: 0无  1线上 2线下
    //     payWaySet,
    //     orderNo: that.info.orderNo,
    //     sheetItem: [],
    //     checkAuditRecord: {
    //       auditProject: "", // 核销记录文案
    //     },
    //   };

    //   that.info.sheetList.forEach((item) => {
    //     item.checkItem.forEach((v) => {
    //       params.sheetItem.push({
    //         sheetId: item.sheetId,
    //         itemId: v.itemId,
    //         auditNum: v.specsNum - v.auditNum,
    //       });
    //       params.checkAuditRecord.auditProject += `${
    //         v.itemName
    //       }<span style="color: #F56C6C;padding-left: 5px;">(${
    //         v.specsNum - v.auditNum
    //       }${v.unit || "项"})</span><br/>`;
    //     });
    //   });

    //   console.log(JSON.parse(JSON.stringify(params)));
    //   checkOrderSettle(params).then(() => {
    //     that.$emit("refresh");
    //     that.$message.success("确认收款并核销成功!");
    //     that.visible = false;
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>
